<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showFailToast } from 'vant';
import YHeader from '@/components/YHeader.vue';

// 引入API（根据项目实际情况可能需要创建）
// import { joinCourse } from '@/api/classroom';

const router = useRouter();
const courseCode = ref('');



const onSubmit = async () => {
  try {
    // TODO: 调用加入课程API
    // const result = await joinCourse(courseCode.value);
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    showToast({
      type: 'success',
      message: '加入课程成功',
      onClose: () => {
        router.push({
          name: 'classroomList'
        });
      }
    });
  } catch (error) {
    console.error('加入课程失败', error);
    showFailToast('加入课程失败，请检查课程码是否正确');
  }
};
</script>
<template>
    <div class="join-course-container">
      <YHeader name="加入课堂"></YHeader>
      
      <div class="join-form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="courseCode"
              name="courseCode"
              label="课程码"
              placeholder="请输入课程邀请码"
              :rules="[{ required: true, message: '请输入课程邀请码' }]"
            />
          </van-cell-group>
          
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              加入课程
            </van-button>
          </div>
        </van-form>
      </div>
      
      <div class="tips">
        <p>提示：</p>
        <p>1. 课程邀请码由课程教师提供</p>
        <p>2. 加入课程后可查看课程内容和参与课程活动</p>
        <p>3. 如遇到问题，请联系课程教师</p>
      </div>
    </div>
  </template>
  
 
  
  <style scoped>
  .join-course-container {
    height: 100vh;
    background-color: #f7f8fa;
    display: flex;
    flex-direction: column;
  }
  
  .join-form {
    margin-top: 20px;
  }
  
  .tips {
    margin: 20px;
    padding: 16px;
    background-color: #f2f3f5;
    border-radius: 8px;
    color: #646566;
    font-size: 14px;
  }
  
  .tips p {
    margin: 5px 0;
  }
  </style>